<template>
  <div>
    <h2>
      <span class="return">{{cardlist.provincename}}</span>
      <span class="mid">></span>
      <span class="vicetit">{{cardlist.cityname}}</span>
      <span class="mid">></span>
      <span class="vicetit">{{cardlist.countname}}</span>
      <span class="mid">></span>
      <span class="vicetit">{{cardlist.placename}}</span>
    </h2>
    <div class="info">
      <h3>卡点信息</h3>
      <ul>
        <li>场所ID：{{cardlist.id}}</li>
        <li>场所名字：{{cardlist.placename}}</li>
        <li>场所位置：{{cardlist.placeseat}}</li>
      </ul>
    </div>
    <!-- <div class="test">
      <h3>监测信息</h3>
      <ul class="menus">
        <li>人员</li>
        <li @click='changemenu(v,i)' :class="menuflag == i ? 'actived1' : '' " v-for="(v,i) in list" :key='i'>{{v.name}}</li>
      </ul>
      <ul class="msg">
        <li v-for="(v,i) in temlist" :key='i' @click='detailstext()'>
          <b>{{v.count}}</b>
          <p><i :class="v.risklevel == 'g' ? 'col1' : v.risklevel == 'y' ? 'col2' : v.risklevel == 'b' ? 'col3' : v.risklevel == 'o' ? 'col4' : v.risklevel == 'r' ? 'col5' : '' "></i>{{v.text}}
          </p>
        </li>
      </ul>
    </div> -->
    <!-- <div class="trend">
      <h3>趋势分析</h3>
      <ul class="menus">
        <li>时间</li>
        <li @click='changetime(v,i)' :class="timeflag == i ? 'actived2' : '' " v-for="(v,i) in list2" :key='i'>{{v.name}}</li>
        <li>
          <el-date-picker class="picktime" v-model="trendtime2" type="daterange" @change="picktrendate2" format="yyyy-MM-dd"
            value-format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']">
          </el-date-picker>
        </li>
      </ul>
      <ul class="menus">
        <li>统计项</li>
        <li @click='changesum(v,i)' :class="sumflag == i ? 'actived3' : '' " v-for="(v,i) in list3" :key='i'>{{v.name}}</li>
      </ul>
    </div> -->

    <!-- <div v-show="!emptyflag" id="singleChart" :style="{width: '1100px', height: '340px', backgroundColor:'#000418'}"></div>
    <div v-show="emptyflag" class="emptybox">无数据</div> -->

    <div class="record">
      <h3>消杀记录</h3>
      <div class="pickbin">
        <span>消杀时间</span>
        <el-date-picker class="picktime" v-model="trendtime" type="daterange" @change="picktrendate" format="yyyy-MM-dd"
          value-format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']">
        </el-date-picker>
        <span>负责人</span>
        <el-input class="inp" v-model="charger" placeholder="请输入内容"></el-input>
        <el-button type="primary" class="search" @click="searchdata"><i class="el-icon-search"></i> 搜索</el-button>
      </div>
      <div class="cabin">
        <table>
          <thead>
            <tr>
              <th v-for="(v,i) in forbidheadlist" :key='i'>{{v}}</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(v,i) in forbiddatalist" :key='i'>
              <td>{{ v.placeid }}</td>
              <td>{{ v.placename }}</td>
              <td>{{ v.placeseat }}</td>
              <td>{{ v.createtime }}</td>
              <td>{{ v.contact }}</td>
              <td>{{ v.phone }}</td>
              <td class="detail">
                <span class="edit" @click='editcur(v,i)'>编辑</span>
                <span class="del" @click='delcur(v)'>删除</span>
              </td>
            </tr>
          </tbody>
        </table>
        <p v-show='forbiddatalist.length == 0' class="emptydata">无数据</p>
      </div>
      <el-pagination :current-page.sync="pagecurrent2" @current-change="handleSizeChange2" background layout="prev, pager, next"
        :total="pagetotal2"></el-pagination>
    </div>
    <el-dialog title="编辑消杀记录" :visible.sync="dialogTableVisible">
      <table class="editbox">
        <thead>
          <tr>
            <th>场所ID</th>
            <th>场所名称</th>
            <th>场所位置</th>
            <th>消杀时间</th>
            <th>联系电话</th>
          </tr>
        </thead>
        <tbody>
          <tr >
            <td><input v-model="editobj.placeid" placeholder="请输入内容" /></td>
            <td><input v-model="editobj.placename" placeholder="请输入内容" /></td>
            <td><input v-model="editobj.placeseat" placeholder="请输入内容" /></td>
            <td><input v-model="editobj.createtime" placeholder="请输入内容" /></td>
            <td><input v-model="editobj.phone" placeholder="请输入内容" /></td>
          </tr>
        </tbody>
      </table>
       <div slot="footer" class="dialog-footer">
          <el-button @click="dialogTableVisible = false">取 消</el-button>
          <el-button type="primary" @click="save">确 定</el-button>
        </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'CardDetail',
    data() {
      return {
        pagecurrent2: 1,
        pagetotal2:10,
        dialogTableVisible:false,
        charger: '',
        emptyflag: true,
        trendtime: '',
        trendtime2: '',
        menuflag: 0,
        timeflag: 0,
        sumflag: 0,
        province: '广东教育局',
        city: '深圳教育局',
        school: '南山小学',
        position: '东校门',
        cardlist: {
          school: '福田小学',
          name: '东校门',
          id: '12345',
          position: '五道口17号',
          person: '张三；李四',
          equipment: '测温枪、检测仪、体温贴',
          charge: '马大胆',
          phone: '010-2736849'
        },
        temlist: [],
        forbidheadlist: ['场所ID', '场所名称', '场所位置', '消杀时间', '负责人', '联系电话', '操作'],
        forbiddatalist: [],
        list: [{
            name: '学生',
            code: '1'
          },
          {
            name: '职工',
            code: '2'
          },
          {
            name: '访客',
            code: '3'
          }
        ],
        list2: [{
            name: '今天',
            code: '1'
          },
          {
            name: '7天',
            code: '7'
          },
          {
            name: '14天',
            code: '14'
          },
          {
            name: '30天',
            code: '30'
          }
        ],
        list3: [{
            name: '测温',
            code: '1'
          },
          {
            name: '体温异常',
            code: '2'
          }
        ],
        trendlist: {
          n1: 0,
          n2: 0,
          n3: 0,
          n4: 0,
          n5: 0,
          n6: 0,
          n7: 0
        },
        datax: [],
        datay: [],
        timelist: [],
        ranklevel: '',
        personType: '',
        provinceno: '',
        cityno: '',
        schoolno: '',
        istoday: '',
        statisticstype: '1',
        isdate: '1',
        editobj: {},
        passkey: null
      }
    },
    mounted() {
      this.cardlist = JSON.parse(this.$route.query.text);
      console.log(this.cardlist);
      this.getinfo();
      this.gettrend();
      this.getdisinfo()

    },
    methods: {
      searchdata(){
        this.getdisinfo()
      },
      handleSizeChange2(v){
        this.pagecurrent2 = v;
        this.getdisinfo()
      },
      getdisinfo() {
        console.log(this.trendtime)
        if(this.trendtime == null){
          this.trendtime = []
        }
        this.$http('/disinfect/getmanage', {
          "personincharge": this.charger,
          "starttime": this.trendtime[0] || '',
          "endtime": this.trendtime[1] || '',
          "organizaitonname": '',
          "pagecurrent": this.pagecurrent2,
          "pagesize": 5
        }).then(res => {
          console.log(res);
          if (res.code == 200) {
            this.forbiddatalist = res.data.tplace.records;
            this.pagetotal2 = res.data.tplace.pages * 10;
          }
        })
      },
      save(){
        var i = this.passkey;
        var obj = JSON.parse(JSON.stringify(this.editobj));
        this.forbiddatalist[i].id = obj.id;
        this.forbiddatalist[i].placename = obj.placename;
        this.forbiddatalist[i].placeseat = obj.placeseat;
        this.forbiddatalist[i].createtime = obj.createtime;
        this.forbiddatalist[i].phone = obj.phone;
        this.dialogTableVisible = false;
        this.editrecord()
      },
      editcur(v,i){
        this.passkey = i;
        this.dialogTableVisible = true;
        this.editobj = JSON.parse(JSON.stringify(v));
        console.log(this.editobj);
      },
      delcur(v) {
        this.$confirm('你确定要删除这个消杀记录吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.delinfo(v.id)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      detailstext() {
        this.$router.push('/monitoring')
      },
      // 删除
      delinfo(id){
        var id = String(id);
        this.$http('/disinfect/delete', {
          "id": id,
        }).then(res => {
          if(res.code == 200){
            this.$message({
              message: '删除成功',
              type: 'success'
            });
            this.getdisinfo()
          }
        })
      },
      //start
      // 编辑消杀
      editrecord() {
        // this.editobj.id = Number(this.editobj.id)
        this.$http('/disinfect/saveOrUpdate', {
          "id": this.editobj.id, /// 消杀id，如果是新增，可以补传值，修改必须传值
          "schoolno": this.schoolno, //学校id，登陆的时候能获取到
          "placeid": this.editobj.placeid, //场所id
          "placename": this.editobj.placename, // 场所名称
          "placeseat": '', //消杀地点
          "phone": this.editobj.phone, //联系电话
          "contact": this.editobj.contact, // #负责人
          "createtime": this.editobj.createtime // #消杀时间
        }).then(res => {
          console.log(res)
          if (res.code == 200) {
            this.$message({
              message: '修改成功',
              type: 'success'
            });
            this.getlist()
          }
        })
      },
      //end
      // 豆腐块
      getinfo() {
        this.$http('/user/loginindex', {}).then(res => {
          console.log(res);
          if (res.code == 200) {
            this.provinceno = res.data.user.provinceid;
            this.cityno = res.data.user.cityid;
            this.schoolno = res.data.classinfo.schoolno;
            switch (res.data.roleid) {
              case 1001:
                this.ranklevel = '1'
                break;
              case 1002:
                this.ranklevel = '2'
                break;
              case 1003:
                this.ranklevel = '3'
                break;
              case 1005:
                this.ranklevel = '4'
                break;
              case 1006:
                this.ranklevel = '5'
                break;
            }
            this.getlist1()
          }
        })
      },
      gettrend() {
        this.$http('/health/healthInfoStatistics/getTrends', {
          "isdate": this.isdate,
          "provinceno": this.provinceno,
          "schoolno": this.schoolno,
          "cityno": this.cityno,
          "istoday": this.istoday,
          "statisticstype": this.statisticstype,
          "begintime": this.trendtime2[0] || '',
          "endtime": this.trendtime2[1] || ''
        }).then(res => {
          if (res.code == 200) {
            // alert(res.data)
            if (res.data == '') {
              this.emptyflag = true
            } else {
              this.emptyflag = false;
              this.datax = [];
              this.datay = [];
              console.log(res);
              res.data.forEach(v => {
                this.datax.push(v.unitime);
                this.datay.push(v.count)
              });
              this.drawLine()
            }
          }
        })
      },
      getlist1() {
        this.$http('/health/healthInfoStatistics/getStatistics', {
          "ranklevel": this.ranklevel,
          "provinceno": "1",
          "schoolno": "",
          "cityno": "",
          "schoolLevel": "",
          "personType": this.personType
        }).then(res => {
          console.log(res)
          if (res.code == 200) {
            this.temlist = [];
            res.data.forEach(v => {
              switch (v.text) {
                case '日测温':
                  this.temlist.push(v)
                  break;
                case '日测温异常':
                  this.temlist.push(v)
                  break;
                case '测温人数':
                  this.temlist.push(v)
                  break;
                case '测温异常人数':
                  this.temlist.push(v)
                  break;
              }
            })

          }
        })
      },
      onPlayerPause(player) {
        //监听暂停
        console.log('暂停');
        // 暂停时时间
        console.log(player.duration());
        this.$emit('onPlayerPauseFun', player);
      },
      onPlayerPlay() {},
      playerStateChanged() {},
      onPlayerLoadeddata() {},
      onPlayerTimeupdate() {},

      picktrendate(v) {
        console.log(v);
        this.trendtime = v
      },
      picktrendate2(v) {
        this.timeflag = -1;
        this.trendtime2 = v;
        this.isdate = '0';
        this.gettrend()
      },
      changemenu(v, i) {
        this.menuflag = i;
        this.personType = v.code;
        this.getlist1();

      },
      changetime(v, i) {
        this.trendtime2 = [];
        this.timeflag = i;
        this.isdate = v.code;
        this.gettrend()
      },
      changesum(v, i) {
        this.sumflag = i;
        this.statisticstype = v.code;
        this.gettrend()
      },
      drawLine() {
        let that = this;
        console.log(that.datax)
        console.log(that.datay)
        let myChart = this.$echarts.init(document.getElementById('singleChart'));
        myChart.setOption({
          title: {
            text: ''
          },
          // tooltip: {
          //     trigger: 'axis',
          //     axisPointer: {
          //         type: 'cross',
          //         label: {
          //             backgroundColor: 'blue'
          //         }
          //     }
          // },
          // legend: {
          //     data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
          // },
          tooltip: {
            // trigger: 'item', //标签
            trigger: 'axis', //标签
            // backgroundColor: '#000',
            color: 'red',
            axisPointer: {
              // type: 'cross',
              // label: {
              //     backgroundColor: 'blue'
              // }
              crossStyle: {
                backgroundColor: 'red'
              }
            },
            formatter: function(params) {
              // console.log(params);
              // 可有自定义表格、html样式等；
              var str = '测温人数：' + that.trendlist.n1 + '<br/>' + '测温异常人数：' + that.trendlist.n2 + '<br/>' + '疑似人数：' +
                that.trendlist.n3 +
                '<br/>' + '确诊人数：' + that.trendlist.n4 + '<br/>' + '居家隔离：' + that.trendlist.n5 + '<br/>' + '医疗隔离：' +
                that.trendlist.n6 + '<br/>' + '康复人数：' + that.trendlist.n7;
              return str;
            }
          },
          // toolbox: {
          //     feature: {
          //         saveAsImage: {}
          //     }
          // },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [{
            type: 'category',
            boundaryGap: false,
            data: that.datax, // ['0点', '6点', '12点', '18点', '24点'],
            axisLabel: {
              show: true,
              textStyle: {
                color: '#fff'
              }
            },
          }],
          yAxis: [{
            type: 'value',
            axisLabel: {
              show: true,
              textStyle: {
                color: '#fff'
              }
            },
            //设置网格线颜色
            splitLine: {
              show: true,
              lineStyle: {
                color: ['#333'],
                width: 1,
                type: 'solid'
              }
            }
          }],
          series: [{
            name: '邮件营销',
            type: 'line',
            stack: '总量',
            areaStyle: {},
            itemStyle: {
              normal: {
                areaStyle: {
                  type: 'default',
                  color: '#090f42',
                },
                lineStyle: { //线的颜色
                  color: '#2c39ec'
                },
                //以及在折线图每个日期点顶端显示数字
                label: {
                  show: true,
                  position: 'top',
                  textStyle: {
                    color: '#fff'
                  }
                }
              },
            },
            data: that.datay // [23, 32, 101, 134, 90]
          }, ]
        });
      },
    }
  }
</script>

<style lang="less" scoped>
  /deep/ .el-pagination {
    margin: 30px 0;
  }

  /deep/ .el-pagination.is-background .btn-next,
  /deep/ .el-pagination.is-background .btn-prev,
  /deep/ .el-pagination.is-background .el-pager li {
    background-color: #090f42;
    color: #fff;
    border: 1px solid #1a2497;
  }

  /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #1520be;
    border-color: #1520be;
  }
  .emptydata {
    font-size: 15px;
    color: white;
    text-align: center;
    line-height: 44px;
  }
  /deep/ .el-dialog{
    width: 750px;
  }
  .editbox{
    display: table;
    width: 100%;
    border-collapse: collapse;
    thead{
      th{
        border: 1px solid #ccc;
        text-align: center;
        font-size: 14px;
        line-height: 34px;
      }
    }
    tbody{
      td{
        border: 1px solid #ccc;
        input{
          display: inline-block;
          text-align: center;
          width: 100%;
          border: none;
          font-size: 14px;
          color: #333;
          line-height: 34px;
          &:focus{
            outline: none;
          }
        }
      }
    }
  }

  h3 {
    font-size: 20px;
    color: white;
    font-weight: normal;
    margin-bottom: 30px;
  }

  .emptybox {
    background: #03426f;
    font-size: 22px;
    text-align: center;
    padding: 100px 0;
    color: white;
  }

  h2 {
    font-size: 16px;
    color: #fff;
    line-height: 44px;
    margin-bottom: 20px;

    .return {
      cursor: pointer;

      &:hover {
        color: #4353da;
      }
    }

    .mid {
      font-size: 12px;
      color: #fff;
      margin: 0 10px;
    }

    .vicetit {
      font-size: 14px;
      color: #fff;
    }
  }

  .pickbin {
    margin: 54px 0;

    span {
      font-size: 16px;
      color: white;
      display: inline-block;
      margin-right: 24px;
    }

  }

  /deep/ .el-date-editor {
    background-color: transparent;
  }

  /deep/ .el-date-editor .el-range-input {
    background-color: transparent;
    color: white;
  }

  /deep/ .el-range-separator {
    color: white;
  }

  .record {
    h3 {
      margin-top: 50px;
    }

    .el-date-editor {
      margin-right: 20px;
    }

    .inp {
      display: inline-block;
      width: 200px;
      margin-right: 20px;
    }

    .cabin {
      padding: 10px 20px;
      background: #000;

      table {
        width: 100%;
        display: table;
        border-collapse: collapse;

        thead {
          border-bottom: 1px solid #313445;

          th {
            color: #fff;
            font-size: 14px;
            font-weight: 500;
            line-height: 60px;

            &:first-child {
              border-right: 1px solid #313445;
            }
          }
        }

        tbody {
          tr {
            td {
              &:first-child {
                border-right: 1px solid #313445;
              }
            }
          }

          td {
            font-size: 13px;
            color: #fff;
            text-align: center;
            line-height: 60px;

            span {
              color: #2a36e0;
              cursor: pointer;
              margin: 0 6px;
            }

            .edit {
              &:hover {
                color: #15dcd3;
              }
            }

            .del {
              &:hover {
                color: orangered;
              }
            }

            i {
              display: inline-block;
              width: 8px;
              height: 8px;
              border-radius: 50%;
              margin-right: 6px;
            }

            .t1 {
              background-color: #3c3694;
            }

            .t2 {
              background-color: #ca8c38;
            }

            .t3 {
              background-color: #8a58d1;
            }

            .t4 {
              background-color: #c5506f;
            }
          }
        }
      }
    }
  }


  #vjs_video_406 {
    padding: 210px 0 !important;
  }

  .empty {
    width: 100%;
    background-color: #000418;
    border-radius: 4px;
    padding: 30px;

    .blue {
      height: 200px;
      background-color: #091443;
      padding-top: 100px;
      box-sizing: border-box;

      p {
        font-size: 14px;
        color: white;
        text-align: center;
      }
    }
  }

  .menus {
    overflow: hidden;
    margin-bottom: 20px;

    li {
      &:first-child {
        cursor: default;
      }

      line-height: 40px;
      display: inline-block;
      float: left;
      font-size: 15px;
      cursor: pointer;
      color: #fff;
      margin-right: 40px;
    }

  }

  .actived1 {
    color: #00c8f1 !important;
  }

  .actived2 {
    color: #00c8f1 !important;
  }

  .actived3 {
    color: #00c8f1 !important;
  }

  .info {
    ul {
      overflow: hidden;
      width: 100%;
      margin-bottom: 30px;

      li {
        width: 100%;
        float: left;
        margin-bottom: 20px;
        font-size: 14px;
        color: white;
      }
    }
  }

  .test {


    .msg {
      justify-content: space-between;
      width: 94%;
      display: flex;

      li {
        width: 226px;
        height: 128px;
        border-left: 1px solid #454b66;
        border-right: 1px solid #454b66;
        border-top: 1px solid #101944;
        border-bottom: 1px solid #101944;
        border-radius: 6px;

        &:hover {
          border: 1px solid white;
          cursor: pointer;

          b {
            color: #3440de;
          }

          p {
            color: #5862e4;

            i {
              background-color: #444ecf !important;
            }
          }
        }

        b {
          display: block;
          font-size: 30px;
          color: white;
          text-align: center;
          line-height: 80px;
          background-color: #000418;
          border-radius: 6px;
        }

        p {
          background-color: #0b1026;
          font-size: 14px;
          color: white;
          text-align: center;
          line-height: 46px;
          border-top: 1px solid #101944;
          border-radius: 6px;

          i {
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            margin-right: 8px;
          }

          .col1 {
            background-color: green;
          }

          .col2 {
            background-color: yellow;
          }

          .col3 {
            background-color: blue;
          }

          .col4 {
            background-color: orange;
          }

          .col5 {
            background-color: red;
          }
        }
      }
    }
  }

  .trend {
    margin-top: 40px;
  }
</style>
